<template>
    <div>
        <van-row class="myTop" >
          <div class="myContent">
              <van-col span="8">
                  <div class="myImg">
                      <img :src=avatar alt="" style="width: 100%;height: 100%">
                  </div>
              </van-col>
              <van-col span="8" style="color: white;margin: 30px 0 0 20px">{{userName}}</van-col>
          </div>
        </van-row>
        <van-cell title="收藏记录" is-link to="/collection"/>
        <van-cell title="查看个人信息" is-link to="/view" />
        <van-cell title="修改个人信息" is-link to="/modifyInfor" />
        <van-cell title="修改密码" is-link to="/modifyPass" />
        <van-cell title="退出登录" value="" size="large"@click="out"/>

    </div>
</template>

<script>
import {mapState} from "vuex"
import {logOut} from "../../api/user-api"
    export default {
        name: "My",
        data(){
            return{
                title:'',
            }
        },
        computed: {
            ...mapState({
                avatar: "avatar",
                userName:"userName"
            })
        },
        created() {
            this.$store.dispatch("getUserInfo1")
        },
        methods:{
            out(){
                logOut().then(res=>{
                    if (res.code == 0)
                        this.$toast('退出成功');
                        this.$store.commit("changelogin",
                            {islogin: false, loginName: "",userName: "",phonenumber: "",avatar:""})
                    this.$router.push({path:"/login"})
                })
            }
        }


    }
</script>

<style scoped lang="less">
.myTop{
    height: 160px;
    background: #3E3E3E;
    overflow: hidden;
.myContent{
    margin-top: 40px;

    .myImg{
        width:80px;
        height: 80px;
        border-radius: 50%;
        margin-left:  30px;
        overflow: hidden;

    }
}

}
</style>